<template>
	<view>
		<view class="info-block">
			<view class="title">
				<view style="font-weight: 600;">{{title}}</view>
				<view v-if="showBtn">
					<u-button type="primary" shape="circle" size="mini" :plain="true" icon="plus"
						@click="$helper.onJump(`/pagesJiushi/customer/actualController/signUplpad?cid=${customerId}&bid=${businessId}&type=${type}&title=${title}`)">
						<u-icon name="plus" size="24"></u-icon>新增</u-button>
				</view>
			</view>
			<view class="block-list" v-if="dataList.length>0">
				<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in dataList" :key="index"
					@click="click" @open="open" :options="options">
					<view class="block-item">
						<view class="block-content">{{ item.attachmentDescription }}</view>
						<JSGJImages :imagesList="item.attachmentList"></JSGJImages>
					</view>
				</u-swipe-action>
			</view>
			<view v-else>
				<view class="explain uni-center">
					暂无{{title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/js/config.js';
	const apiUrl = "/api/Jiushi/Customerattachment";
	export default {
		props: {
			customerId: {
				type: [Number, String],
				default () {
					return ''
				}
			},
			businessId: {
				type: [Number, String],
				default () {
					return ''
				}
			},
			title: {
				type: String,
				default () {
					return ''
				}
			},
			type: {
				type: String,
				default () {
					return ''
				}
			}
		},
		created() {
			this.showBtn = uni.getStorageSync(config.Global.cache + '_ShowCompanyButton')
			if (!this.showBtn) {
				this.options = []
			}
		},
		data() {
			return {
				showBtn: false,
				showChildrenForm: false,
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
						text: "编辑",
						style: {
							backgroundColor: "#007aff",
						},
					},
					{
						text: "删除",
						style: {
							backgroundColor: "#dd524d",
						},
					},
				],
				dataList: [],
				formData: {
					customerId: this.customerId,
					businessId: this.businessId,
					attachmentType: this.type,
					attachmentName: this.title,
					attachmentDescription: "",
					attachmentPath: ""
				},
				attendanceFileList: []
			};
		},
		watch: {
			businessId: {
				immediate: true,
				deep: true,
				handler(val) {
					this.getListData()
				}
			}
		},
		methods: {
			clear(e) {
				// TODO nvue 取消冒泡
				e.stopPropagation()
			},
			getListData() {
				this.$helper.ajax({
					url: `${apiUrl}?customerId=${this.customerId}&businessId=${this.businessId}&attachmentType=${this.type}`,
					method: "GET",
					contentType: "application/json",
					success: res => {
						if (res.data.data) {
							this.dataList = res.data.data.list.map(item => {
								item.show = false
								if (item.attachmentPath != null && item.attachmentPath != "") {
									item.attachmentList = item.attachmentPath == null ? [] : item
										.attachmentPath.split(',')
								}
								return item
							})
						}
					}
				});
			},
			click(index, index1) {
				if (index1 == 1) {
					let tempData = this.dataList[index]
					this.$helper.ajax({
						url: `${apiUrl}/${tempData.id}`,
						method: "DELETE",
						contentType: "application/json",
						success: res => {
							this.dataList.splice(index, 1);
						}
					});
				} else {
					this.dataList[index].show = false;
					let tempData = this.dataList[index]
					this.$helper.onJump(`/pagesJiushi/customer/actualController/signUplpad?id=${tempData.id}`)
				}
			},
			open(index) {
				this.dataList[index].show = true;
				this.dataList.map((val, idx) => {
					if (index != idx) this.dataList[idx].show = false;
				});
			}
		},
	}
</script>
<style lang="scss" scoped>
	.pop-box {
		padding: 24rpx;

		.pop-title {
			width: 80%;
			font-size: 36rpx;
			text-align: left;
			line-height: 60rpx;
		}
	}
</style>